<!DOCTYPE html>
<html>
<head>
    <title>编辑旅游问题</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="/js/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css" />
    <link rel="stylesheet" href="/css/reset.css" />
    <link rel="stylesheet" href="/css/myInfo.css" />
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css" />
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <script src="/js/plugins/eleditor/Eleditor.min.js"></script>
    <script src="/js/plugins/eleditor/webuploader.min.js"></script>
    <script src="/js/checkLogin.js"></script>
    <script src="/js/common.js"></script>

</head>

<body style="background: url('/upload/2.bmp')">
<form id="imgForm" action="/images" method="post" enctype="multipart/form-data">
    <input type="file" name="pic" style="display: none;" accept="image/*"/>
</form>

<div class="search-head">
    <div class="row nav-search">
        <div class="col-2">
            <a href="javascript:window.history.go(-1);">
                <span><i class="fa fa-times"></i></span>
            </a>
        </div>
        <div class="col-5"></div>
        <div class="col" style="text-align: right;">
            <i class="fa fa-floppy-o fg-fw" id="save"><span>保存</span></i>
            <i class="fa fa-check" id="release"><span>发布</span></i>
        </div>
    </div>
</div>

<div class="travels form-group">
<br>
    <div class="title ">
       <strong>标题:</strong><input class="form-control" id="title" placeholder="请输入标题" render-value="title"/>
    </div>
    <hr>

    <div href="javascript:"><strong>正文:</strong></div>

    <!--富文本编辑器-->
    <div id="contentEditor" render-html="troubleContent.content"></div>

    <hr/>
    <div class="container">
        <form id="detailForm" method="post">
            <input type="hidden" name="id"/>

            <label><strong>旅游地点:</strong></label>
            <select class="form-control" name="place.id" render-value="place.id">
            </select>

            <div class="form-check" align="right">
                <label class="form-check-label">
                    <input class="form-check-input" type="checkbox" render-attr="checked=isPublic" name="isPublic">是否匿名
                </label>
            </div>
        </form>
    </div>
    <hr/>
</div>
<script>
    $(function () {
        var user = JSON.parse(sessionStorage.getItem("user"));

        // 2.查出所有地区
        $.get(baseUrl+"/regions", function (data) {
            // console.log(data);
            // $("#detailForm").renderValues(data);
            $.each(data, function (index, ele) {
                var op = $("<option></option>").html(ele.name).val(ele.id);
                op.appendTo($("#detailForm select[name='place.id']"));
            });

        });

        // 3.日期插件,直接用onclick
        // 4.富文本编辑框
        var Edr = new Eleditor({
            el: '#contentEditor',
            upload: {
                server: baseUrl+'/images'
            }
        });

        var state;
        // 5.保存发布时状态设置,成员变量state = 0, state = 1,需要将表单变成异步提交
        $("#save").click(function () {
            state = 0;
            $("#detailForm").submit();
        });
        $("#release").click(function () {
            state = 1;
            $("#detailForm").submit();
        });

        // 8.编辑回显,首先要获取当前url上id的值,
        var id = getParams().id;
        if (id){
            // 如果id存在,要发起ajax请求,获取游记内容
            $.get(baseUrl+"/travelTroubles/"+id,function (data) {
                // console.log(data);
                $(".travels").renderValues(data);
            });

            // 并且在表单隐藏域中设置id的值,同时要在提交表达的时候,判断id是否存在,存在要将_method参数加入
            $("#detailForm input[name='id']").val(id);
        }

        // 6.将表单设置成异步提交
        $("#detailForm").ajaxForm({
            beforeSubmit: function (arr) {
                // The array of form data takes the following form:
                // [ { name: 'username', value: 'jresig' }, { name: 'password', value: 'secret' } ]
                // return false to cancel submit
                arr.push({name: "title", value: $("#title").val()});
                arr.push({name: "troubleContent.content", value: Edr.getContent()});
                arr.push({name: "state", value: state});
                if (id){
                    arr.push({name:"_method",value:"PUT"});
                }

            },
            success: function (data) {
                $(document).dialog({
                    titleShow: false,
                    content: "提交成功",
                    type: "confirm",
                    buttons: [
                        {
                            name: '跳转到我的提问',
                            callback: function () {
                                // 登录成功,跳转页面,window可以不写
                                location.href = "/mine/travelTroubles.html";
                            }
                        }
                    ]
                });
            }
        });

        // 7.请求响应action,动态拼接
        $("#detailForm").attr("action",baseUrl+"/users/"+user.id+"/travelTroubles");



    })

</script>
</body>
</html>